import React, { useState, useEffect, useCallback } from 'react';
import { getSysUserSelected } from '../../../../../../Api/listUrl'
import {putAccPayInsertPay} from '../../../../api'
import { Modal, Form, Input, DatePicker, message, Select } from 'antd'
import moment from 'moment'

const { Option } = Select;
const { TextArea } = Input;

/**
 * @description: 待支付-操作-》支付
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-08-02）
 */

const PaymentModule = ({ setPaymentModuleShow, paymentModuleShow, clickSerialNo, listFun }) => {
    const [form] = Form.useForm()
    const { validateFields, resetFields } = form
    const [userList, setUserList] = useState([])
    const userFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSysUserSelected()
                if (code === '20000') {
                    setUserList(data)
                } else {
                    message.error(msg)
                }
            })()
        },
        [],
    )
    useEffect(() => {
        userFun()
    }, [userFun])
    const handleOk = () => {
        validateFields().then(values => {
            values.paymentDate = moment(values.paymentDate).format('YYYY-MM-DD HH:mm:ss')
            values.serialNo = clickSerialNo
            ;(async () => {
                const {code, msg} = await putAccPayInsertPay(values)
                if(code === '20000') {
                    message.success('费用支付成功！')
                    resetFields()
                    listFun()
                    setPaymentModuleShow(false);
                }else{
                    message.error(msg)
                }
            })()
        })
    };

    const handleCancel = () => {
        setPaymentModuleShow(false);
    };
    return <Modal title="支付" visible={paymentModuleShow} onOk={handleOk} onCancel={handleCancel}>
        <Form
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            form={form}
        >
            <Form.Item
                label="付款时间"
                name="paymentDate"
                rules={[{ required: true, message: '请选择付款时间!' }]}
            >
                <DatePicker />
            </Form.Item>
            <Form.Item
                label="付款人"
                name="paymentMainId"
                rules={[{ required: true, message: '请选择付款人!' }]}
            >
                <Select >
                    {
                        userList.map(item => <Option value={item.id} key={item.id}>{item.name}</Option>)
                    }
                </Select>
            </Form.Item>
            <Form.Item
                label="付款方式"
                name="paymentType"
                rules={[{ required: true, message: '请选择付款方式!' }]}
            >
                <Select >
                    <Option value={0} >
                        现金
                    </Option>
                    <Option value={1} >
                        垫付
                    </Option>
                </Select>
            </Form.Item>
            <Form.Item
                label="备注"
                name="remake"
            >
                <TextArea rows={4} />
            </Form.Item>

        </Form>
    </Modal>
}

export default PaymentModule